import React from 'react';
import { Grid, Input, Button, Select} from '@alifd/next';
import { useSetState } from 'ahooks';
const { Row, Col } = Grid;
import styles from './index.module.scss';
const Search= (props: any) => {
  const [state, setState] = useSetState({
    list: props.searchList,
    value: ''
  });

  const slist = props.searchList;
  const changeVal = (val, index)=>{
    console.log(val);
    // console.log(val);
    // console.log(index)
    slist[index].value = val;

  }
  const submit=()=>{
    const test = {};
    slist.forEach((item)=>{
      test[item.name] = item.value;
    })
    console.log(test)
  }
    return (<div>
            <Row>
              {state.list && state.list.map((item, index) => {
                    return <Col span="6" key={item.name}>
                      <Row align="center">
                        <Col span="6" className={styles.title}>
                          {item.title}
                        </Col>
                        {item.type === 'input' && <Col span="18">
                          <Input
                            className={styles.input}
                            onChange={(e) => changeVal(e, index)}
                            aria-label="Medium"
                            aria-labelledby="J_InputMedium" />
                        </Col>}
                        {
                          item.type === 'select' && <Col span="18">
                            <Select className={styles.select} onChange={(e) => changeVal(e, index)}>
                              {item.options && item.options.map((itemVal) => <Select.Option key={itemVal.value} value={itemVal.value}>{itemVal.label}</Select.Option>)}
                            </Select>
                          </Col>
                        }
                      </Row>
                    </Col>
                  })}
            </Row>
            <Row>
              <Button type="primary" onClick={submit}>搜索</Button>
              <Button type="primary" onClick={submit}>重置</Button>
            </Row>
        </div>
    )


}
export default Search;
